<template>
	<view class="login-bg">
		<view class="content">
			<uni-forms :modelValue="loginForm" class="form">
				<uni-forms-item label="" name="username">
					<uni-easyinput prefixIcon="user" type="text" v-model="loginForm.username" placeholder="请输入账号">
						<template slot="left">
							<image src="@/static/user.png" class="prefix-img" />
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="" name="password">
					<uni-easyinput prefixIcon="user" type="password" v-model="loginForm.password" placeholder="请输入登录密码"
						:clearable="false">
						<template slot="left">
							<image src="@/static/password.png" class="prefix-img" />
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="" name="password">
					<uni-data-checkbox v-model="rememberPsw" :localdata="typeList" :multiple="true"></uni-data-checkbox>
				</uni-forms-item>
			</uni-forms>
			<view class="action-btn">
				<button @click="handleLogin" v-if="loginForm.username && loginForm.password"
					class="login-btn">登录</button>
				<button @click="handleLogin" v-else class="login-btn login-btn-disabled">登录</button>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		login,
		setDeviceInfo
	} from '@/api/login.js'
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
				},
				rememberPsw: [],
				typeList: [{
					text: '记住登录状态',
					value: 1
				}],
			}
		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo');
			console.log('userInfo', userInfo)
			const {
				username,
				password,
				rememberPsw
			} = userInfo
			console.log('ffff', username,
				password,
				rememberPsw)
			if (username && password && rememberPsw?.length) {
				this.loginForm.username = username;
				this.loginForm.password = password;
				this.rememberPsw = rememberPsw;
			} else {
				this.loginForm.username = '';
				this.loginForm.password = '';
				this.rememberPsw = [];
			}
		},
		methods: {
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				if (this.rememberPsw) {
					const userInfo = {
						...result,
						...this.loginForm,
						rememberPsw: this.rememberPsw,
					}
					uni.setStorageSync('userInfo', userInfo);
				} else {
					uni.removeStorageSync('userInfo');
				}
			},
			handleLogin() {
				login(this.loginForm).then((res) => {
					console.log('res', res)
					this.loginSuccess(res)
					this.getDeviceInfo()
					uni.reLaunch({
						url: '/pages/index/custom/custom'
					})
				})
			},
			getDeviceInfo() {
				uni.getSystemInfo({
					success: function(res) {
						console.log('getSystemInfo', res)
						const params = {
							name: '晟小原',
							code: res.deviceId,
							type: '大屏',
							serial: res.deviceId,
							online: 0,
							updateTime: new Date().getTime(),
							activeTime: new Date().getTime(),
							onlineTime: new Date().getTime(),
							deptId: 1,
							deviceName: res.deviceBrand,
							model: res.deviceModel,
							version: res.appVersion,
							password: '12345',
						}
						uni.setStorageSync('deviceId', res.deviceId);
						setDeviceInfo(params).then((res) => {
							// console.log('setDeviceInfo'.res)
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100vh;
	}

	.login-bg {
		width: 100%;
		height: 100vh;
		background-image: url('../../static/bg.png');
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.content {
			width: 32.2%;
			height: 806rpx;
			background-image: url('../../static/login-bg.png');
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.form {
				width: 55%;
			}

			.uni-input {
				width: 55%;
				height: 10.4%;
				background: #FAFAFA;
				border-radius: 4rpx;
				border: 1px solid #BFBFBF;
				margin-bottom: 24rpx;

			}

			.prefix-img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}


			.action-btn {
				width: 55%;
				height: 44rpx;

				border-radius: 4rpx;

				.login-btn {
					background: #1890FF;
					color: #fff;
				}

				.login-btn-disabled {
					background: #BFBFBF;
				}
			}
		}
	}
</style>